<%--
  Created by IntelliJ IDEA.
  User: dqf
  Date: 2015/3/9
  Time: 15:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<style>
    div.pull-right{
        margin-top:-2px;
        margin-right:-150px
    }
</style>
<div class="row">
    <!-- NEW WIDGET START -->
    <article class="col-sm-12 col-md-12 col-lg-12">
        <div class="jarviswidget well" id="wid-id-3"
             data-widget-colorbutton="false"
             data-widget-editbutton="false"
             data-widget-togglebutton="false"
             data-widget-deletebutton="false"
             data-widget-fullscreenbutton="false"
             data-widget-custombutton="false"
             data-widget-sortable="false">

            <!-- widget div-->
            <div>
                <div class="widget-body">

                    <a class="btn btn-default" id="btn-re-common" href="javascript:void(0)">
                        <i class="fa fa-lg fa-mail-reply-all"></i>知识共享
                    </a>

                    <a class="btn btn-default pull-right pull-right-fix" id="btn-save-common" href="javascript:void(0);"><i class="fa fa-lg fa-download"></i> 保存</a>

                    <hr class="simple">
                    <div class="alert alert-warning fade in">
                        <i class="fa-fw fa fa-warning"></i>
                        <strong>注意</strong> 图文说明文字数目限制约
                        <span class="label label-info bg-color-red txt-color-white">250000</span>
                        字左右.
                    </div>

                    <ul id="myTab1" class="nav nav-tabs bordered  ">
                        <li class="active">
                            <a href="#s1" data-toggle="tab"><i class="fa fa-fw fa-lg fa-credit-card"></i> 基本信息   </a>
                        </li>
                        <li>
                            <a href="#s2" id="linkman_title" data-toggle="tab"><i class="fa fa-fw fa-lg fa-users"></i> 图文说明 </a>
                        </li>

                    </ul>
                    <div id="myTabContent1" class="tab-content padding-10 ">
                        <div class="tab-pane fade in active " id="s1" style="margin: 10px;">
                            <div>
                                <form id="knowledge" class="smart-form" novalidate="novalidate" action="" method="post">
                                    <input type="hidden" name="keyId" id="keyId" value="<s:property value="knowledge.id" />"/>

                                    <header id="textTitle" style="display: block;">
                                        知识共享
                                    </header>
                                    <fieldset>
                                        <div class="row">
                                            <label class="label col col-2">
                                                <i class="fa fa-asterisk txt-color-red"></i>
                                                知识大类别
                                            </label>
                                            <section class="col col-5">
                                                <label class="input">
                                                    <select class="form-control" name="superTypeId">
                                                        <option value="">请选择</option>
                                                        <s:iterator value="superTypesArrayList" id="list">
                                                            <option  value="<s:property value="#list.id"/>" <s:property value="#list.selected"/> ><s:property value="#list.name"/></option>
                                                        </s:iterator>
                                                    </select>
                                                </label>
                                            </section>
                                        </div>
                                        <div class="row">
                                            <label class="label col col-2">
                                                <i class="fa fa-asterisk txt-color-red"></i>
                                                知识小类别
                                            </label>
                                            <section class="col col-5">
                                                <label class="input">
                                                    <select class="form-control" name="subTypeId">
                                                        <option value="">请选择</option>
                                                        <s:iterator value="subTypesArrayList" id="list">
                                                            <option  value="<s:property value="#list.id"/>" <s:property value="#list.selected"/> ><s:property value="#list.name"/></option>
                                                        </s:iterator>
                                                    </select>
                                                </label>
                                            </section>
                                        </div>
                                        <div class="row">
                                            <label class="label col col-2">
                                                <i class="fa fa-asterisk txt-color-red"></i>
                                                知识标题
                                            </label>
                                            <section class="col col-5">
                                                <label class="input">
                                                    <input type="text" name="title" id="title" placeholder="请输入标题" value="<s:property value="knowledge.name"/>" >
                                                </label>
                                            </section>
                                        </div>
                                        <div class="row">
                                            <label class="label col col-2">文件上传</label>
                                            <section class="col col-5">
                                                <label class="input">
                                                    <input  name="uploadify" id="filename" placeholder="" type="file" >
                                                    <input name="fileId" id="fileId" style="display: none" value="<s:property value="knowledge.knowledgeId"/>">
                                                </label>
                                            </section>
                                        </div>
                                        <input type="hidden" name="context" id="context" value="<s:property value="knowledge.context"/>">
                                        <input type="hidden" name="contextHtml" id="contextHtml" value="<s:property value="knowledge.contextHtml"/>">
                                    </fieldset>
                                </form>
                            </div>
                        </div>

                        <div class="tab-pane fade in " id="s2" style="margin: 10px">
                            <fieldset>
                                    <%--<s:property escape='0' value="knowledge.contextHtml" />--%>
                                    <script type="text/plain" style="width:800px" id="editor" ><s:property escape='0' value="knowledge.contextHtml" /></script>
                            </fieldset>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
</div>

    <script type="text/javascript">
        //上传
        inputLoad({
            objId:"filename",
            entityName:"knowledgeId",
            sourceId:"fileId"
        });

    //返回视图
    $("#btn-re-common").click(function(){
        loadURL("ajax!knowledge.action",$('#content'));
    });

    //校验
    $("#knowledge").validate({
        rules : {
            superTypeId : {
                required : true
            },
            subTypeId:{
                required : true
            },
            title:{
                required : true
            }
        },
        messages : {
            superTypeId : {
                required : '请选择知识大类'
            },
            subTypeId : {
                required : '请选择知识小类'
            },
            title : {
                required : '请输入标题'
            }
        },
        ignore: "",
        errorPlacement : function(error, element) {
            error.insertAfter(element.parent());
        }
    });

    //保存
    $("#btn-save-common").click(
            function(e) {
                $("#contextHtml").val(UM.getEditor('editor').getContent());
//                alert(UM.getEditor('editor').getContent().length);
                $("#context").val(UM.getEditor('editor').getContentTxt());
                $("#areaselect_span").show();
                if(!$("#knowledge").valid()){
                    $("#areaselect_span").hide();
                    return false;
                }
                $.SmartMessageBox({
                    title : "提示：",
                    content : "确定提交吗？",
                    buttons : '[取消][确认]'
                }, function(ButtonPressed) {
                    if (ButtonPressed === "取消") {
                        e.preventDefault();
                        e.stopPropagation();
                        return;
                    }
                    if (ButtonPressed === "确认") {
                        $("#btn-save-common").attr("disabled", "disabled");
                        form_save("knowledge","<%=path%>/com/ajax-knowledge!save.action",null,function(pdata){
                            if(pdata.state == "200"){
                                loadURL("ajax!knowledge.action",$('#content'));
                            }
                        });

                    }
                });
            }
    );

</script>
<script type="text/javascript">
    $(function(){
        var width = $("#content").width();
        console.debug(width);
        //----Umeditor----//
        iniUmeditor();
        function iniUmeditor(){
            if(umIndex == 1){
                UM.getEditor("editor").destroy();//销毁实例
            }
            umIndex = 1;	//是否已经打开过
            //$(".editor").remove();//再把编辑层删除
            //UM.getEditor('container').setContent($("#contextHtml").val());
            var serverPath = '<%=basePath %>com/',

                    ue = UM.getEditor('editor', {
                        imageUrl:serverPath + "ajax-knowledge!infoUpload.action",
                        imagePath:serverPath,
                        lang:/^zh/.test(navigator.language || navigator.browserLanguage || navigator.userLanguage) ? 'zh-cn' : 'en',
                        langPath:UMEDITOR_CONFIG.UMEDITOR_HOME_URL + "lang/",
                        focus: true
                    });

//            ue.setWidth(width-100);
            ue.addListener("ready",function(){
                ue.setContent($("#contextHtml").val());
            });


        }

        function insertHtml() {
            var value = prompt('插入html代码', '');
            ue.execCommand('insertHtml', value)
        }
        function getAllHtml() {
            alert(UM.getEditor('editor').getAllHtml())
        }
        function getContent() {
            var arr = [];
            arr.push("使用editor.getContent()方法可以获得编辑器的内容");
            arr.push("内容为：");
            arr.push(UM.getEditor('editor').getContent());
            alert(arr.join("\n"));
        }
        function isFocus(){
            alert(ue.isFocus())
        }
        function doBlur(){
            ue.blur()
        }
        function getPlainTxt() {
            var arr = [];
            arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
            arr.push("内容为：");
            arr.push(UM.getEditor('editor').getPlainTxt());
            alert(arr.join('\n'))
        }
        function setContent(isAppendTo) {
            var arr = [];
            arr.push("使用editor.setContent('欢迎使用umeditor', true)方法可以设置编辑器的内容");
            UM.getEditor('editor').setContent('欢迎使用umeditor', isAppendTo);
            alert(arr.join("\n"));
        }
        function setDisabled() {
            UM.getEditor('editor').setDisabled('fullscreen');
            disableBtn("enable");
        }

        function setEnabled() {
            UM.getEditor('editor').setEnabled();
            enableBtn();
        }

        function getText() {
            //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
            var range = UM.getEditor('editor').selection.getRange();
            range.select();
            var txt = UM.getEditor('editor').selection.getText();
            alert(txt)
        }

        function getContentTxt() {
            var arr = [];
            arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
            arr.push("编辑器的纯文本内容为：");
            arr.push(UM.getEditor('editor').getContentTxt());
            alert(arr.join("\n"));
        }
        function hasContent() {
            var arr = [];
            arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
            arr.push("判断结果为：");
            arr.push(UM.getEditor('editor').hasContents());
            alert(arr.join("\n"));
        }
        function setFocus() {
            UM.getEditor('editor').focus();
        }
        function deleteEditor() {
            disableBtn();
            UM.getEditor('editor').destroy();
        }
        function disableBtn(str) {
            var div = document.getElementById('btnContainer');
            var btns = UM.dom.domUtils.getElementsByTagName(div, "button");
            for (var i = 0, btn; btn = btns[i++];) {
                if (btn.id == str) {
                    UM.dom.domUtils.removeAttributes(btn, ["disabled"]);
                } else {
                    $(btn).attr( "disabled", true ).addClass( "disabled" );
                }
            }
        }
        function enableBtn() {
            var div = document.getElementById('btnContainer');
            var btns = UM.dom.domUtils.getElementsByTagName(div, "button");
            for (var i = 0, btn; btn = btns[i++];) {
                $(btn).removeAttr( "disabled" ).removeClass( "disabled" );
            }
        }

    });

</script>




